﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>图书列表</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.8/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.8/css/sm-extend.min.css">
    <link href="/View_Mobile/CSS/szhlextend.css?ver=20160904" rel="stylesheet" />

    <style type="text/css">
        body {
            font-size: .75rem;
        }

        .ms-controller, [ms-controller] {
            display: none;
        }

        .ui-row-flex {
            display: -webkit-box;
            width: 100%;
            -webkit-box-sizing: border-box;
        }

        .ui-col {
            float: none;
            -webkit-box-flex: 1;
            width: 0;
            box-sizing: border-box;
        }

        .ui-col-3 {
            -webkit-box-flex: 3;
        }

        .tplist > li {
            position: relative;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-right: 15px;
            -webkit-box-align: center;
        }

        li {
            list-style: none;
        }

        .bq {
            text-align: center;
            position: absolute;
            top: 0.2rem;
            right: 0.2rem;
            width: 1rem;
            height: 1rem;
            line-height: 1rem;
            font-size: 0.5rem;
            color: #fff;
            background-color: #FF5151;
            border-radius: 0.5rem;
        }

        .current {
            background-color: white;
        }

        .addmin {
            position: absolute;
            right: 0.2rem;
            width: 0.9rem;
            height: 0.3rem;
        }

            .addmin input {
                width: 1rem;
                height: 1rem;
                font-size: 0.18rem;
                border: 1px solid #e5e5e5;
                text-align: center;
                color: #A1A09C;
                background-color: #fff;
            }
    </style>

</head>
<body ms-controller="model">

    <div class="page page-current" id="pageindex1" style="background-color: #E5E5E5;">
        <div class="content">
            <div class="row no-gutter" style="width: 100%; margin-bottom: 40px; ">
                <div class="col-20" style="width: 25%; min-height: 500px; ">
                    <ul class=" tplist" style=" position: fixed; z-index: 100; left: 0; padding: 0; margin: 0; width: 25%;">
                        <li ms-repeat-el="TSData" ms-click="ckcp(this)" style="margin:0;padding-left:15px;" ms-attr-class="$index==0?' ui-border-b current':'ui-border-b'">
                            <div>
                                <a ms-attr-href="'#st'+el.ID" external>{{el.TypeName}}</a>
                            </div>
                            <b class="bq" ms-if="el.Qty!='0'">{{el.Qty}}</b>
                        </li>
                    </ul>
                </div>
                <div class="col-80" style="width: 75%;">
                    <div ms-repeat-st="TSData" ms-attr-id="'st'+st.ID" class="cplist">
                        <div style="text-align: center; color: #a7a7a7; border-left: solid 1px white; height: 40px; line-height: 40px; font-size: 16px;" class="ui-border-b">{{st.TypeName}}</div>

                        <div class="list-block media-list" style="padding:0;margin:0;">
                            <ul>
                                <li class="item-content" ms-repeat-item="st.Item" style="padding-left: 0.05rem;">
                                    <div class="item-media" style="padding:0">
                                        <img src="/View_Mobile/Images/book2.png">
                                    </div>
                                    <div class="item-inner" style="padding-right: .2rem; padding-top: .2rem; padding-bottom: .2rem;">
                                        <div class="item-title-row">
                                            <div class="item-title" style="font-size: 0.65rem;">{{item.TSName}}</div>
                                        </div>
                                        <div class="item-subtitle">
                                            <p style="line-height: 20px; font-size: 12px; color: #777;margin:0; ">作者{{item.auther}}</p>
                                        </div>

                                        <div class="item-subtitle" style="display: -webkit-box;    HEIGHT: 1.2REM;">
                                            <div>
                                                <span style="line-height: 20px; font-size: 12px; color: #777;margin:0; "> 数量<span class="price">{{item.SL}}</span></span>
                                            </div>
                                            <div style="-webkit-box-flex: 1;  display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; ">
                                                <span class="addmin" ms-if="!isbj" style="width:auto;">
                                                    <input type="button" class="minus" value="-" ms-click="minus(item,st)">
                                                    <input type="button" class="result" readonly ms-duplex="item.Qty" style="border: none; color: #FF5151;padding:0;">
                                                    <input type="button" class="add" value="+" ms-click="add(item,st)">
                                                </span>
                                                <span class="addmin" ms-if="isbj" style=" width: auto;">
                                                    <input type="button" class="result" value="↓" style="border: none; color: #FF5151;" ms-if="item.Status=='0'">
                                                    <input type="button" value="编辑" ms-click="update(item)" style="width: auto; line-height: 0.28rem; padding: 0; min-width: 45px; color: white; background-color: #4cd964; border: none; border-radius: .25rem; ">
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="item-content" ms-if="st.Item.size()==0" style="margin: 0; text-align: center;">
                                    <div style="width: 100%; height: 52px; line-height: 52px;">无图书</div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <nav class="bar bar-tab" ms-if="!isbj" style="height: 40px; z-index: 16;">
            <div class="content-block" style="margin: 0px; height: 40px; line-height: 40px; ">
                <div class="row">
                    <div style="width:75%;float:left;"> 合计:¥<span style="font-weight: bold; color: #ff4222;"></span>({{totalqty}})</div>
                    <div style="width: 25%; float: left;"><a href="javascript:void(0);" class="button button-fill button-success external" ms-click="savedata()">添加借阅</a></div>
                </div>
            </div>
        </nav>
        
    </div>

    <script src="/View_Mobile/JS/layer/layer.m.js"></script>
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.8/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.8/js/sm-extend.min.js' charset='utf-8'></script>
    <script src="/View_Mobile/JS/avalon1.47.js"></script>
    <script src="/View_Mobile/JS/ComFunJS.js?jsver=20160425"></script>
    <script>
        //document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
        //    //隐藏右上角按钮
        //    WeixinJSBridge.call('hideOptionMenu');
        //});

        var model = avalon.define({
            $id: "model",
            TSData: [],
            totalprice: 0,
            totalqty: 0,
            YJYCDate: "",
            isbj: "",
            ckcp: function (obj) {
                $(obj).parent().find("li").removeClass("current");
                $(obj).addClass("current");
                $(obj).find("a").trigger("click");
            },
            add: function (im, el) {
                if (im.Qty * 1 == 1) {
                    top.ComFunJS.winwarning("不能再借了")
                    return;
                }
                im.Qty = im.Qty * 1 + 1;
                el.Qty = el.Qty * 1 + 1;
                model.totalqty = model.totalqty * 1 + 1;
                model.totalprice = model.totalprice * 1 + im.Price * 1;
            },
            minus: function (im, el) {
              
                im.Qty = im.Qty * 1 - 1;
                el.Qty = el.Qty * 1 - 1;
                model.totalqty = model.totalqty * 1 - 1;
                model.totalprice = model.totalprice * 1 - im.Price * 1;
            },
            update: function (im) {
                //window.location = "UI_DCGL_INPUT.html?id=" + im.ID + "&r=" + Math.random();
                window.location = "/View_Mobile/UI/BASE/APP_MOBIL_WF.html?FormCode=DCGL&id=" + im.ID + "&r=" + Math.random();
            },
            savedata: function () {
                var IDS = "";
                $(model.TSData).each(function (rt, ix) {
                    $(ix.Item).each(function (index, ele) {
                        if (ele.Qty * 1 > 0) {
                            IDS = IDS + ele.ID + ",";
                        }
                    })
                });
                if (!IDS) {
                    top.ComFunJS.winwarning("选中要借阅的图书")
                    return;
                }
                window.location = "/View_Mobile/UI/BASE/APP_MOBIL_WF.html?FormCode=JYGL&tsids=" + IDS + "&r=" + Math.random();

            }

        });
        avalon.ready(function () {
            $.getJSON("/API/VIEWAPI.ashx?Action=JYGL_GETTSLIST&r=" + Math.random(), {}, function (data) {
                if (data.ErrorMsg == "") {
                    model.TSData = data.Result;
                }
            })

            $(".content").on('scroll', function () {
                for (var i = 0; i < $(".cplist").length; i++) {
                    var sheight = 0;
                    for (var j = 0; j < i; j++) {
                        sheight = sheight + $(".cplist").eq(j).height();
                    }
                    if ($(this).scrollTop() > sheight - 77) {
                        $(".tplist li").removeClass("current");
                        $(".tplist li").eq(i).addClass("current");
                    }
                }
                if ($(this).get(0).scrollHeight == $(this).scrollTop() + $(this).height()) {
                    $(".tplist li").removeClass("current");
                    $(".tplist li").eq($(".cplist").length - 1).addClass("current");
                }
            });
        })

        function back() {
            window.history.back();
        }
    </script>
</body>







</html>
